<template>
  <div class="newpos" :class="{'blackNewpos': $store.state.app.language === 'en', 'koNewpos': $store.state.app.language === 'ko' }">
    <div class="newpos-top flexc">
      <div class="newpos-top-cont flexb">
        <div class="top-left">
          <div class="top-left-caption">
            <span>Newpos</span>
            <span>|</span>
            <span>{{ $t('newpos.newCenter') }}</span>
          </div>
          <div class="top-left-list flex">
            <i class="iconfont icon-wuxuzhuanbi" style="font-size: 40px;"></i>
            <div class="top-left-word">
              <p class="goldColor mb5">{{ $t('newpos.saveTip') }}</p>
              <p style="margin-bottom: 3px;">{{ $t('newpos.saveTip1') }}</p>
              <p>{{ $t('newpos.saveTip2') }}</p>
            </div>
          </div>
          <div class="top-left-list flex">
            <i class="iconfont icon-shuangzhongshouyi" style="font-size: 33px;"></i>
            <div class="top-left-word">
              <p class="goldColor mb5">{{ $t('newpos.quitTip') }}</p>
              <p style="margin-bottom: 3px;">{{ $t('newpos.quitTip1') }}</p>
              <p>{{ $t('newpos.quitTip2') }}</p>
            </div>
          </div>
          <div class="top-left-list flex">
            <i class="iconfont icon-linghuotuichu"></i>
            <div class="top-left-word">
              <p class="goldColor mb5">{{ $t('newpos.profitTip') }}</p>
              <p style="margin-bottom: 3px;">{{ $t('newpos.profitTip1') }}</p>
              <p>{{ $t('newpos.profitTip2') }}</p>
            </div>
          </div>
        </div>
        <div class="top-right">
          <!-- 昨日最高年化收益 -->
          <div class="flexc">
            <span>{{ $t('newpos.annualYield') }}</span>
            <span class="goldColor cursorPointer ml" @click="handleDetailLastProfits">{{ $t('newpos.detailed') }}</span>
          </div>
          <p class="ratio center">{{detInfo.maxAnnualizedRate || '0.00'}}%</p>
          <div class="flexb">
            <!-- 挖矿账户数 -->
            <div style="flex:1;" class="center" :style="$store.state.app.language !== 'en' ? 'padding-right: 70px;' : 'padding-right: 20px;'">
              <p class="caption">{{ $t('newpos.numberAccount') }}</p>
              <p class="number">{{detInfo.poolAccountCount || 0}}</p>
            </div>
            <!-- 挖矿总量 -->
            <div style="flex:1">
              <p>
                <span class="caption mr">{{ $t('newpos.totalQuantity') }}(EOS)</span>
                <span class="details" @click="votesTotalVisible = true;">{{ $t('newpos.detailed') }}</span>
              </p>
              <p class="number">{{detInfo.poolVotesCount || '0'}}</p>
            </div>
          </div>
          <p class="center tip1">{{ $t('newpos.votesTip1') }}</p>
          <p class="center tip2">{{ $t('newpos.votesTip2') }}</p>
          <!-- 立即挖矿-->
          <div class="vote-btn" @click="handleVotesVisible">{{ $t('newpos.immediateMining') }}</div>
          <!-- 详细说明 -->
          <div class="flexc">
            <a :href="handleToDetails('details')" target="_blank" class="details-btn">{{ $t('newpos.detailedDescription') }}</a>
          </div>
        </div>
      </div>
    </div>
    <div class="newpos-img">
      <p class="blue" v-if="showNotice">
        <a :href="handleToNotice()" target="_blank">{{ $t('newpos.reducedNotice') }} ></a>
      </p>
      <p class="yellow" v-else-if="pool.attenuationStatus === 1" @click="attenuationVisible=true;">
        <i class="iconfont icon-huangse"></i>
        {{ $t('newpos.weightTime', {number: pool.attenuationRate }) }}
        {{ pool.attenuationDate | dateFormat }}
        {{ $t('newpos.weightTime1', {number: pool.attenuationRate }) }}{{ $t('newpos.confirmVote') }} >
      </p>
      <p class="red" v-else-if="pool.attenuationStatus === 2" @click="attenuationVisible=true;">
        <i class="iconfont icon-hongse1"></i>{{ $t('newpos.reducedVoteAgain', {number: pool.attenuationRate}) }} >
      </p>
    </div>
    <div class="newpos-cont clearfix">
      <!-- 我的挖矿 -->
      <div class="newpos-left fl">
        <newpos-left
        :scatter="scatter"
        :env="env"
        :detInfo="detInfo"
        :proxyList="proxyList"
        :eosBalance="eosBalance"
        :rexBalance="rexBalance"
        :canBuyRexNum="canBuyRexNum"
        @listenWalletLogin="handleWalletLogin"
        @listenVotes="handleVotes"
        :pool="pool"
        :pool2="pool2"/>
      </div>
      <!-- k线 -->
      <div class="newpos-right fr">
        <newpos-right :detInfo="detInfo" />
      </div>
    </div>
    <!-- 最新记录 -->
    <div class="newpos-bottom">
      <div class="caption">
        {{ $t('newpos.newRecords') }}
        <span class="color999 ml5" style="font-size: 12px;">{{ $t('newpos.newRecords1') }}</span>
      </div>
      <newpos-bottom :operationRecords="operationRecords"/>
    </div>
    <!-- 挖矿 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="votesVisible"
      width="600px">
      <votes :scatter="scatter"
      :detInfo="detInfo"
      :env="env"
      :proxyList="proxyList"
      :eosBalance="eosBalance"
      :rexBalance="rexBalance"
      :canBuyRexNum="canBuyRexNum"
      @listenVotes="handleVotes"
      :votesVisible="votesVisible" :status="0"/>
    </el-dialog>
    <!-- 全网挖矿总量明细 -->
    <el-dialog
      :title="$t('newpos.totalQuantity1')"
      class="votesDiaog"
      :close-on-click-modal="false"
      :visible.sync="votesTotalVisible"
      width="600px">
      <votes-total
      @listenVotesTotal="handleVotesTotal"
      :proxyVotesInfos="detInfo.proxyVotesInfos"
      :votesTotalVisible="votesTotalVisible"/>
    </el-dialog>
    <!-- 昨日最高年化收益 -->
    <el-dialog
      :title="$t('newpos.annualYield')"
      class="votesDiaog"
      :close-on-click-modal="false"
      :visible.sync="lastProfitsVisible"
      width="600px">
      <last-profits
      @listenLastProfits="lastProfitsVisible"
      :pool="pool"
      :ismax="1"
      :lastProfitsVisible="lastProfitsVisible"/>
    </el-dialog>
    <!-- 衰减弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="attenuationVisible"
      width="520px"
      @close="handleClose">
      <newpos-attenuation
        :attenuationVisible="attenuationVisible"
        :pool="pool"
        :clicking="clicking"
        @listenAttenuationVisible="handleAttenuationVisible"/>
    </el-dialog>
    <!-- 温馨提示 请使用桌面版钱包-->
    <el-dialog
      :title="$t('public.reTip')"
      :visible.sync="tipsDialogVisible"
      :show-close="false"
      width="420px"
      center>
      <div class="center el-pagination__total" style="padding-bottom: 30px">{{$t('public.walletDesktop')}}</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="tipsDialogVisible = false">{{$t('public.comfirm')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment';
import { EosModel } from '@/utils/eos';
import { toFixed, accAdd, toLocalTime } from '@/utils/validate';
import NewposLeft from './components/NewposLeft';
import NewposRight from './components/NewposRight';
import NewposBottom from './components/NewposBottom';
import Votes from './dialog/Votes';
import VotesTotal from './dialog/VotesTotal';
import LastProfits from './dialog/LastProfits';
import NewposAttenuation from './dialog/NewposAttenuation';

export default {
  name: 'newpos', // 矿池
  data() {
    return {
      env: 'EOS',
      scatter: null,
      votesVisible: false, // 挖矿弹窗显示值
      votesTotalVisible: false, // 挖矿总量明细弹窗显示值
      lastProfitsVisible: false, // 昨日最高年化收益
      attenuationVisible: false, // 矿池衰减
      tipsDialogVisible: false, // 温馨提示
      pool: { // 个人矿池信息
        annualizedRate: null, // 昨日年化收益率
        nodeAnnualizedRate: null, // 昨日节点年化收益率
        rexAnnualizedRate: null, // 昨日REX年化收益率
        votesCount: null, // 总票数
        stakeCount: null, // 抵押数量
        rexCount: null, // REX 数量
        nodeIncome: null, // 昨日节点收益
        rexIncome: null, // 昨日REX收益
        accNodeIncome: null, // 累计节点收益
        accRexIncome: null, // 累计REX收益
        attenuationDate: null, // 权益衰减日期
        attenuationRate: null, // 权益衰减比例
        attenuationStatus: null, // 权益衰减状态：0-正常；1-即将衰减；2-已衰减
      },
      pool2: {
        rexCount: 0, // REX 数量
        stakeCount: 0, // 抵押数量
      },
      detInfo: { // 全网矿池信息
        maxAnnualizedRate: null, // 昨日最高年化收益率 ,
        maxNodeAnnualizedRate: null, // 昨日节点最高年化收益率 ,
        maxRexAnnualizedRate: null, // 昨日REX最高年化收益率 ,
        poolAccountCount: null, // 挖矿账户数 ,
        poolVotesCount: 0, // 投票总量 ,
        proxyVotesInfos: [], // 代理投票明细
      },
      operationRecords: [], // 最新记录
      operationRecordsZoon: [], // 最新记录容器
      newposTimer: null, // 轮询
      operationInter: null, // 轮询
      proxyList: [], // 所有的代理节点名称
      eosBalance: '0.0000 EOS',
      rexBalance: '0.0000 REX',
      canBuyRexNum: '0.0000 REX', // rex 可卖
      waKuangZongLiangTimer: null, // 获取挖矿总量及明细
      language: 'en',
      clicking: 0, // 第一次进来点击记录
      showNotice: true, // 是否显示公告
    }
  },
  components: {
    NewposLeft,
    NewposRight,
    NewposBottom,
    Votes,
    VotesTotal,
    LastProfits,
    NewposAttenuation,
  },
  props: {},
  watch: {
    '$store.state.app.language': function change(val) {
      this.language = val;
    },
    '$store.state.app.scatter.identity': {
      handler: function listen(val) {
        this.scatter = this.$store.state.app.scatter;
        if (val) {
          // 获取用户挖矿总量
          this.handleWaKuangZongLiang();
          // 获取当前账户矿池信息
          this.handleGetAccountPoolInfo();
          return;
        }
        this.pool = {
          annualizedRate: null, // 昨日年化收益率
          nodeAnnualizedRate: null, // 昨日节点年化收益率
          rexAnnualizedRate: null, // 昨日REX年化收益率
          votesCount: null, // 总票数
          stakeCount: null, // 抵押数量
          rexCount: null, // REX 数量
          nodeIncome: null, // 昨日节点收益
          rexIncome: null, // 昨日REX收益
          accNodeIncome: null, // 累计节点收益
          accRexIncome: null, // 累计REX收益
          attenuationDate: null, // 权益衰减日期
          attenuationRate: null, // 权益衰减比例
          attenuationStatus: null, // 权益衰减状态：0-正常；1-即将衰减；2-已衰减
        }
        this.pool2 = {
          rexCount: 0, // REX 数量
          stakeCount: 0, // 抵押数量
        }
      },
      deep: true,
    },
  },
  computed: {},
  created() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
  },
  mounted() {
    this.handleNotice();
    this.scatter = this.$store.state.app.scatter;
    // 所有的代理节点名称
    this.handleGetNewdexProxyList();
    // 获取当前账户矿池信息
    this.handleGetAccountPoolInfo();
    // 交易环境
    this.handleExchangeScience();
    this.handleNewposTimer();
    this.language = this.$store.state.app.language;
  },
  beforeDestroy() {
    if (this.newposTimer) {
      clearTimeout(this.newposTimer);
    }
    if (this.operationInter) {
      clearTimeout(this.operationInter);
    }
    if (this.waKuangZongLiangTimer) {
      clearTimeout(this.waKuangZongLiangTimer);
    }
  },
  methods: {
    // 衰减公告跳转链接
    handleToNotice() {
      const url = {
        'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/articles/360032501692',
        'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/articles/360032501692',
        en: 'https://newdex.zendesk.com/hc/en-us/articles/360032501692',
        ko: 'https://newdex.zendesk.com/hc/ko/articles/360032501692',
      }
      return url[this.language]
    },
    // 详细说明
    handleToDetails(val) {
      const url = {
        details: {
          'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/articles/360029247352-%E5%85%B3%E4%BA%8ENewpos-EOS-',
          'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/articles/360029247352-%E9%97%9C%E6%96%BCNewpos-EOS-',
          en: 'https://newdex.zendesk.com/hc/en-us/articles/360029247352-About-Newpos-EOS-',
          ko: 'https://newdex.zendesk.com/hc/ko/articles/360029247352-Newpos-%EC%86%8C%EA%B0%9C-EOS-',
        },
        img: {
          'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/articles/360029251332-Newdex%E4%B8%8A%E7%BA%BF-Newpos%E7%9F%BF%E6%B1%A0-%E9%87%8D%E7%A3%85%E7%A6%8F%E5%88%A9-%E6%8C%96%E7%9F%BF%E8%B5%A2%E5%A5%96%E9%87%91-%E5%A7%94%E6%89%98%E6%8A%95%E7%A5%A8%E5%8D%B3%E6%8C%96%E7%9F%BF-',
          'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/articles/360029251332-Newdex%E4%B8%8A%E7%B7%9A-Newpos%E7%A4%A6%E6%B1%A0-%E9%87%8D%E7%A3%85%E7%A6%8F%E5%88%A9-%E6%8C%96%E7%A4%A6%E8%B4%8F%E7%8D%8E%E9%87%91-%E5%A7%94%E8%A8%97%E6%8A%95%E7%A5%A8%E5%8D%B3%E6%8C%96%E7%A4%A6-',
          en: 'https://newdex.zendesk.com/hc/en-us/articles/360029251332-Newdex-Launches-Newpos-Pool-Heavy-Benefits-Mine-to-Win-Rewards-Delegating-Vote-Means-Mining-',
          ko: 'https://newdex.zendesk.com/hc/ko/articles/360029251332-Newdex-Launches-Newpos-Pool-Heavy-Benefits-Mine-to-Win-Rewards-Delegating-Vote-Means-Mining-',
        }
      };
      return url[val][this.language];
    },
    // 2分钟获取一次的数据
    handleNewposTimer() {
      // 获取全网矿池信息
      this.handleGetAllPoolInfo();
      // 获取最新记录
      this.handleGetLatestOperationRecords();
      if (this.newposTimer) {
        clearTimeout(this.newposTimer);
      }
      this.newposTimer = setTimeout(this.handleNewposTimer, 120000);
    },
    // 获取当前账户矿池信息
    handleGetAccountPoolInfo() {
      if (this.scatter.identity && this.scatter.chain === 'eos') {
        this.$http.post('/pool/getAccountPoolInfo').then((res) => {
          if (res.code !== 0) return;
          if (res.accountPoolInfo) {
            this.pool = res.accountPoolInfo;
            if (!this.scatter.identity) return;
            // 矿池衰减弹窗第一次出现
            const accountName = this.scatter.identity.accounts[0].name;
            const attenuationLocal = JSON.parse(localStorage.getItem('attenuationDialog') || '{}');
            if (this.pool.attenuationStatus === 1 || this.pool.attenuationStatus === 2) {
              if (attenuationLocal[accountName] === undefined || attenuationLocal[accountName] === null) {
                this.attenuationVisible = true;
                this.clicking = 1;
              }
              if (attenuationLocal[accountName] === 1 && this.pool.attenuationStatus === 2) {
                this.attenuationVisible = true;
                this.clicking = 1;
              }
            }
          }
        });
      }
    },
    // 获取全网矿池信息
    handleGetAllPoolInfo() {
      this.$http.post('/pool/getPoolInfo').then((res) => {
        if (res.code !== 0) return;
        this.detInfo = res.poolInfo;
      });
    },
    // 获取最新记录
    handleGetLatestOperationRecords() {
      this.$http.post('/pool/getLatestOperationRecords').then((res) => {
        if (res.code !== 0) return;
        if (this.operationRecords.length > 0) {
          // 存在旧数据
          this.operationRecordsZoon = res.operationRecords.filter(a => !this.operationRecords.find(b => b.id === a.id));
          this.operationRecordsZoon.reverse();
          if (this.operationInter) {
            clearInterval(this.operationInter);
          }
          this.operationInter = setInterval(() => {
            if (this.operationRecordsZoon.length > 0) {
              this.operationRecords.unshift(this.operationRecordsZoon[0]);
              this.operationRecordsZoon.splice(0, 1);
            }
          }, 1000)
          return
        }
        this.operationRecords = res.operationRecords;
      });
    },
    // 昨日最高年化收益率 明细
    handleDetailLastProfits() {
      this.pool.maxNodeAnnualizedRate = this.detInfo.maxNodeAnnualizedRate;
      this.pool.maxRexAnnualizedRate = this.detInfo.maxRexAnnualizedRate;
      this.lastProfitsVisible = true;
    },
    // 立即挖矿弹出
    handleVotesVisible() {
      if (this.scatter && this.scatter.by === 'mobileWallet') {
        this.tipsDialogVisible = true;
        return;
      }
      if (this.scatter.chain !== 'eos') {
        this.$message.error(this.$t('newpos.switchEosAccount'));
        return;
      }
      if (this.scatter && this.scatter.identity) {
        this.votesVisible = true;
        this.handleGetTableRowsForStaket();
        this.handleBlanceIvit();
        return;
      }
      this.handleWalletLogin();
    },
    // 账户登录命令传递
    handleWalletLogin() {
      this.$emit('listenWalletLogin', true);
    },
    // 获取用户的挖矿总量
    handleWaKuangZongLiang() {
      if (this.scatter.identity
      && this.scatter.chain === 'eos') {
        // 获取抵押资源CPU/NET
        this.handleGetTableRowsForStaket();
        // 余额获取
        this.handleBlanceIvit();
      }
      if (this.waKuangZongLiangTimer) {
        clearTimeout(this.waKuangZongLiangTimer);
      }
      this.waKuangZongLiangTimer = setTimeout(() => {
        this.handleWaKuangZongLiang();
      }, 10000)
    },
    // 获取Newdex投票代理列表
    handleGetNewdexProxyList() {
      this.$http.post('/pool/getNewdexProxyList').then((res) => {
        if (res.code !== 0) {
          // const msg = res.msg || 'System error'
          // this.$message.error(msg);
          return;
        }
        this.proxyList = res.newdexProxyList || [];
        // 获取用户挖矿总量
        this.handleWaKuangZongLiang();
      });
    },
    // 获取资源抵押账户
    handleGetTableRowsForStaket() {
      EosModel.getTableRowsForStaket((res) => {
        this.pool2.stakeCount = 0;
        const receiverList = res.rows;
        if (receiverList && receiverList.length === 0) {
          return;
        }
        let cpuWeightAll = 0;
        let netWeightAll = 0;
        receiverList.forEach((v) => {
          cpuWeightAll = accAdd(parseFloat(v.cpu_weight, 0), cpuWeightAll);
          netWeightAll = accAdd(parseFloat(v.net_weight, 0), netWeightAll);
        })
        const voterInfo = this.$store.state.app.accountRes;
        const proxy = voterInfo.proxy;
        if (this.proxyList.find(v => v === proxy)) {
          this.pool2.stakeCount = Number(accAdd(cpuWeightAll, netWeightAll));
        }
      })
    },
    // 余额获取
    handleBlanceIvit() {
      EosModel.getCurrencyBalance(this.env, 'eosio.token', (result) => {
        if (!result.length) {
          this.eosBalance = '0.0000 EOS';
        } else {
          this.eosBalance = result[0];
        }
      });
      EosModel.getRexBlance((result) => {
        const row = result.rows;
        if (row && !row.length) {
          this.rexBalance = '0.0000 REX';
          this.canBuyRexNum = '0.0000 REX';
          this.pool2.rexCount = 0;
        } else {
          this.rexBalance = row[0].rex_balance;
          const voterInfo = this.$store.state.app.accountRes;
          const proxy = voterInfo.proxy;
          if (this.proxyList.find(v => v === proxy)) {
            this.pool2.rexCount = parseFloat(row[0].vote_stake, 0);
          }
          const rexMaturities = row[0].rex_maturities;
          let canBuyRexNum1 = 0;
          rexMaturities.forEach((v) => {
            const zone = moment().zone() / 60; // 时区
            const jsTime = moment(v.first).add(0 - zone, 'hours').format('YYYY/MM/DD HH:mm:ss'); // 解锁时间
            const jsBdTime = new Date(jsTime).getTime();
            const bdTime = new Date().getTime();
            const flg = bdTime - jsBdTime >= 0;
            if (flg) {
              canBuyRexNum1 += Number(v.second);
            }
          });
          canBuyRexNum1 += Number(row[0].matured_rex);
          this.canBuyRexNum = `${toFixed(canBuyRexNum1 / 10000, 4)} REX`;
        }
      });
    },
    // 挖矿弹窗回调事件
    handleVotes(way) {
      if (way === 'back') {
        this.pool.attenuationStatus = 0;
        this.handleWaKuangZongLiang();
      }
      if (way === 'tips') {
        this.tipsDialogVisible = true;
      }
    },
    // 关闭衰减弹窗
    handleClose() {
      if (this.clicking === 1) {
        this.clicking = 0;
        const accountName = this.scatter.identity.accounts[0].name;
        const attenuationLocal = JSON.parse(localStorage.getItem('attenuationDialog') || '{}');
        attenuationLocal[accountName] = this.pool.attenuationStatus;
        localStorage.setItem('attenuationDialog', JSON.stringify(attenuationLocal));
      }
    },
    // 挖矿衰减回调
    handleAttenuationVisible(type) {
      if (type === 'close') {
        this.clicking = 0;
        this.attenuationVisible = false;
        this.pool.attenuationStatus = 0;
        // this.handleGetAccountPoolInfo();
      }
    },
    handleNotice() {
      // 仅2019-08-22日显示 & 关闭后不在显示
      const nowDate = new Date();
      const dates = toLocalTime(nowDate).substr(0, 10);
      if (dates !== '2019-08-23') {
        this.showNotice = false;
      }
    },
    // 挖矿总量明细监听回调
    handleVotesTotal() {
    },
    // 昨日最高年化收益监听回调
    handleLastProfits() {
    },
    // 交易环境
    handleExchangeScience() {
      const env = process.env.NODE_ENV;
      let Science = 'EOS';
      switch (env) {
        case 'development':
          Science = 'SYS'
          break;
        case 'production':
          Science = 'EOS';
          break;
        default:
          Science = 'EOS';
          break;
      }
      this.env = Science;
    },
    // 数字截取 - 保留小数
    toFixed(num, p) {
      if (!num && num !== 0) {
        return toFixed(0, p);
      }
      return toFixed(num, p);
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/views/newpos/public.scss';
$back-color: #E5EBF8;
$gold-color: #FFC78A;

.goldColor {
  color: $gold-color;
}

.cursorPointer {
  cursor: pointer;
}

.color999 {
  color: #999;
}

.newpos{
  padding-bottom: 30px;
  letter-spacing: 1px;
  background: #E5EBF8;
  color: #333 !important;

  /deep/ .el-dialog__body {
    color: #333 !important;
  }

  .newpos-img {
    p {
      width: 1260px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      margin: 0 auto 15px;
      cursor: pointer;
      display: block;
      // overflow: hidden;
      // width: 100%;
    }

    i {
      margin-right: 4px;
    }

    .yellow {
      background: #FDF6ED;
      color: #E6A23D;
    }

    .blue {
      background: #E6F9FF;
      color: #2E7DEF;
    }

    .red {
      background: #FEF0F0;
      color: #F56C6C;
    }
  }

  .newpos-top {
    height: 550px;
    margin-bottom: 15px;
    background: linear-gradient(to bottom, #2b3757 , #191c35);
    color: #fff;

    .newpos-top-cont {
      width: 1260px;
      margin: 0 auto;

      .top-left {
        padding: 20px 0 0 10px;

        .top-left-caption {
          font-size: 22px;
          margin-bottom: 50px;

          span:nth-child(1) {
            font-size: 35px;
          }

          span:nth-child(2) {
            vertical-align: middle;
            display: inline-block;
            padding: 0 10px;
            margin-top: -6px;
          }
        }

        .top-left-list {
          margin-bottom: 50px;
          align-items: flex-start;

          i {
            font-size: 30px;
            margin-right: 20px;
            color: #fff;
            font-weight: bold;
          }

          .top-left-word {
            font-size: 15px;
            color: rgba(255, 255, 255, .95);

            p:nth-child(1) {
              font-size: 17px;
            }
          }
        }
      }

      .top-right {
        width: 470px;
        min-height: 400px;
        padding: 38px 30px;
        border-radius: 8px;
        background: #2c3859;

        .ratio {
          font-size: 53px;
          color: $gold-color;
          margin: 25px 0 25px;
        }

        .number {
          font-size: 22px;
          margin-top: 10px;
        }

        .caption {
          color: #8197D3;
        }

        .details {
          cursor: pointer;
          color: $gold-color;
        }

        .tip1 {
          font-size: 16px;
          margin: 35px 0 5px 0;
          color: $gold-color;
        }

        .tip2 {
          font-size: 12px;
          color: $gold-color;
        }

        .vote-btn {
          text-align: center;
          color: #964D05;
          background: $gold-color;
          padding: 10px;
          border-radius: 4px;
          margin-top: 36px;
          cursor: pointer;
          font-size: 16px;
          font-weight: bold;
        }

        .details-btn {
          margin-top: 25px;
          color: #88B6FF;
          cursor: pointer;
        }
      }
    }
  }

  .newpos-cont {
    width: 1260px;
    margin: 0 auto 20px;

    .newpos-left {
      width: 495px;
      height: 500px;
      border-radius: 8px;
      background: #fff;
    }

    .newpos-right {
      width: 745px;
      height: 500px;
      margin-left: 20px;
      border-radius: 8px;
      background: #fff;
    }
  }

  .newpos-bottom {
    min-height: 200px;
    border-radius: 8px;
    width: 1260px;
    margin: 0 auto;
    background: #fff;

    .caption {
      color: #333;
      padding: 15px 20px;
      border-bottom: 1px solid #e4e7ed;
      font-size: 16px;
    }
  }
}

.blackNewpos, .koNewpos {
  letter-spacing: 0px;
}

.theme-1B1D27 {
  .newpos {
    background: #191c35;

    .newpos-left, .newpos-right, .newpos-bottom {
      background: #2c3859;
    }

    .newpos-bottom {
      .caption {
        color: #fff;
        border-color: $borderColor;
      }
    }

    .newpos-left {
      .title {
        color: #fff !important;
      }
    }
  }
}
</style>

